<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="${layout} :: common_header(~{::title})">
    <title th:text="${pageTitle}">ContactUs</title>
</head>

<body th:replace="${layout} :: common_body(~{::div.content-wraper})">


<div class="content-wraper contact-wrap">
    <div class="banner">
        <div class="swiper-container banner-container">
            <div class="swiper-wrapper banner-wrapper">
                <div class="swiper-slide" th:each="item:${banners}">
                    <a href="#" >
                        <img th:src="${item.imgUrl}" th:title="${item.title}" class="banner" alt="banner">
                    </a>
                </div>

            </div>
            <div class="swiper-pagination swiper-pagination-white"></div>
        </div>
    </div>

    <div class="container">
        <div class="tab-box">
            <div class="tab-item active concept">
                Products
            </div>
<!--            <div class="tab-item symbols">-->
<!--                Oriental concept-->
<!--            </div>-->
        </div>
        <!-- 东方符号 -->
        <div class="oriental-symbols-wrap">
            <div class="product-list">
                <a th:href="@{'/'+${language}+'/productDetail/'+${item.id}}" class="product-item" th:each="item:${list}">
                    <img th:src="${item.getIndexImg()}" alt="">
                    <div class="product-item-label" th:if="${language.equals('zh')}" th:text="${item.productName}">Name11 of commodity</div>
                    <div class="product-item-label" th:if="${language.equals('en')}" th:text="${item.productEname}">Name11 of commodity</div>
                </a>
            </div>
            <div class="pagination-box">
                <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
<!--                <ul>-->
<!--                    <li>-->
<!--                        <a href="#">1</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">2</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">3</a>-->
<!--                    </li>-->
<!--                    <li class="active">-->
<!--                        <a href="#">4</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">5</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">6</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">...</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">82</a>-->
<!--                    </li>-->
<!--                </ul>-->
            </div>
        </div>
        <!-- 东方概念 -->
<!--        <div class="oriental-concept-wrap">-->
<!--            <div class="product-list">-->
<!--                <a href="productDetail.html" class="product-item">-->
<!--                    <img src="./images/product02.jpg" alt="">-->
<!--                    <div class="product-item-label">Name of commodity</div>-->
<!--                </a>-->
<!--                <a href="productDetail.html" class="product-item">-->
<!--                    <img src="./images/product02.jpg" alt="">-->
<!--                    <div class="product-item-label">Name of commodity</div>-->
<!--                </a>-->
<!--                <a href="productDetail.html" class="product-item">-->
<!--                    <img src="./images/product02.jpg" alt="">-->
<!--                    <div class="product-item-label">Name of commodity</div>-->
<!--                </a>-->
<!--                <a href="productDetail.html" class="product-item">-->
<!--                    <img src="./images/product02.jpg" alt="">-->
<!--                    <div class="product-item-label">Name of commodity</div>-->
<!--                </a>-->
<!--                <a href="productDetail.html" class="product-item">-->
<!--                    <img src="./images/product02.jpg" alt="">-->
<!--                    <div class="product-item-label">Name of commodity</div>-->
<!--                </a>-->
<!--                <a href="productDetail.html" class="product-item">-->
<!--                    <img src="./images/product02.jpg" alt="">-->
<!--                    <div class="product-item-label">Name of commodity</div>-->
<!--                </a>-->
<!--            </div>-->
<!--            <div class="pagination-box">-->
<!--                <ul>-->
<!--                    <li>-->
<!--                        <a href="#">1</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">2</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">3</a>-->
<!--                    </li>-->
<!--                    <li class="active">-->
<!--                        <a href="#">4</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">5</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">6</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">...</a>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <a href="#">82</a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </div>-->
<!--        </div>-->



    </div>
</div>




</body>

</html>